<script setup lang="ts">
import { onMounted, reactive, ref, toRefs,inject} from "vue";
import { IdentityHttpService, Permit, ResponseStatus } from '../service/identity-http.service';

import {Search,Refresh} from '@element-plus/icons-vue';
import { ElForm,ElMessage} from "element-plus";

var httpService = inject<IdentityHttpService>('IdentityHttpService');
const state = reactive({ //tips：变量不要全放一块，分块定义
   tableData:new Array<Permit>(),
   load:false, 
   xianshi:false,
   addDataDialog:{
    visible: false,
  },
   addTableData:[],
   addForm:{
    id:0,
    name:'',
    description:''

   },
   row:{ //tips: 可省略
    id:0
   },
   deleteDialog:{
    visible: false,
   },
   editrow:{
    id:0,
    name:'',
    description:''
   },
   editDialog:{
    visible: false,
  },
  editForm:{
    id:0,
    name:'',
    description:''

   },

});

  //tips: 可省略,一定要用的话分开声明，减少不必要的代码, 例：
  //const tableData = toRef(state.tableData);
  const {tableData,load,xianshi,addDataDialog,addTableData,addForm,row,editrow,deleteDialog,editDialog,editForm} = toRefs(state);
// 增加数据弹窗
  function addData(row:any){
    state.addDataDialog.visible=true
    state.addForm={
      id:0,
      name:'',
      description:''
    }
    state.row={
      id:0
    }
    state.row.id=row.id

  }

  // 用户追加 提交按钮
  function submitGroup(){
    httpService?.apiPermitCreate(state.row.id,state.addForm.name,state.addForm.description).then(result => {
    if(result.status==ResponseStatus.Success){
       httpService?.apiPermitGetPermitTree().then(result => { //tips：刷新表单操作封装成方法，减少重复代码
         
         state.tableData=[];
         state.tableData.push(result)
         state.addDataDialog.visible=false
         ElMessage.success("追加成功!")
         state.addForm={ //tips：只在显示Dialog时清空表单
           id:0,
           name:'',
           description:''
         }
      });
    }else{
      ElMessage.warning(result.message)
    }
  });

  }
  // 追加取消
  function closeAddDialog(){ //tips：不需要清空表单，无逻辑close不需要定义方法
    state.row={
      id:0
    }
    state.addForm={
           id:0,
           name:'',
           description:''
         }
    state.addDataDialog.visible=false
  }
    // 表格中的删除按钮
  function deleteData(row:any){ //tips：可以用ELMessageBox简化
    state.row={
      id:0
    }
    state.row.id=row.id
    state.deleteDialog.visible=true
    

  }
  // 删除提交
  function confirmDelete(){
    httpService?.apiPermitDelete(state.row.id).then(result => {
    if(result.status==ResponseStatus.Success){
       httpService?.apiPermitGetPermitTree().then(result => {
         
         state.tableData=[];
         state.tableData.push(result)
         state.deleteDialog.visible=false
         ElMessage.success("删除成功!")
         
      });
    }else{
      ElMessage.warning(result.message)
    }
  });
  }
  // 删除取消
  function closeDeleteDialog(){
    state.deleteDialog.visible=false
    state.row={
      id:0
    }
  }
  // 表格中的编辑按钮
  function editData(row:any){ //tips！：逻辑基本相同的添加不要分成两个表单
    state.editDialog.visible=true
    state.editrow={
      id:0,
      name:'',
      description:''
    }
    state.editrow=row
    state.editForm=state.editrow

  }
  //编辑追加 提交按钮
  function editSubmit(){
    httpService?.apiPermitModify(state.editrow.id,state.editForm.name,state.editForm.description).then(result => {
    if(result.status==ResponseStatus.Success){
       httpService?.apiPermitGetPermitTree().then(result => {
         
         state.tableData=[];
         state.tableData.push(result)
         state.editDialog.visible=false
         ElMessage.success("修改成功!")
         state.editForm={
           id:0,
           name:'',
           description:''
         }
      });
    }else{
      ElMessage.warning(result.message)
    }
  });

  }

//编辑取消
function closeEditDialog(){
    state.editrow={
      id:0,
      name:'',
      description:''
    }
    state.editForm={
      id:0,
      name:'',
      description:''
    }
    state.editDialog.visible=false
  }

onMounted(() => {
  httpService?.apiPermitGetPermitTree().then(result => {
    state.tableData.push(result)
  });
});
</script>

<template>
  <div>
  <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      :header-cell-style="{background:'#004ea1',color:'#fff',width:'100%'}" 
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
        <!-- tips: 不需要定义id列 -->
      <el-table-column prop="id" label="用户ID" v-if="xianshi"/>
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="description" label="备注" />
      <el-table-column  label="操作" >
          <template #default="scrope">
             <!-- tips: 带颜色的样式尽量使用对应参数 -->
              <el-button type="text" style="text-decoration: underline;color:#d86f04" @click="addData(scrope.row)" >
                    新增
              </el-button>
              <el-button type="text" style="text-decoration: underline;color:#d86f04" @click="deleteData(scrope.row)">
                    删除
              </el-button>
              <el-button type="text" style="text-decoration: underline;color:#d86f04"  @click="editData(scrope.row)">
                    修改
              </el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-dialog title="追加用户"  v-model="state.addDataDialog.visible" style="width:500px" >
      <el-form :model="addForm" >
        <!-- <el-form-item label="ID" label-width="50px" >
          <el-input v-model="editForm.id" disabled style="width:400px"/>
        </el-form-item> -->
        <el-form-item label="姓名" label-width="50px">
          <el-input v-model="addForm.name" style="width:400px"/>
        </el-form-item>
        <el-form-item label="备注" label-width="50px" >
          <el-input v-model="addForm.description" style="width:400px"/>
        </el-form-item>
                
      </el-form>
      <template #footer>
          <div class="dialog-footer">
              <el-button  type="primary" @click="submitGroup" >提交</el-button>
              <el-button  type="info" @click="closeAddDialog" >取消</el-button>
          </div>
      </template>
    </el-dialog>
    <el-dialog title="确认信息"  v-model="state.deleteDialog.visible" style="width:500px" >
      确定要删除吗?
      <template #footer>
          <div class="dialog-footer">
              <el-button  type="primary" @click="confirmDelete" >确认</el-button>
              <el-button  type="info" @click="closeDeleteDialog" >取消</el-button>
          </div>
      </template>
    </el-dialog>
    <el-dialog title="编辑用户"  v-model="state.editDialog.visible" style="width:500px" >
      <el-form :model="editForm" >
        <!-- <el-form-item label="ID" label-width="50px" >
          <el-input v-model="editForm.id" disabled style="width:400px"/>
        </el-form-item> -->
        <el-form-item label="姓名" label-width="50px">
          <el-input v-model="editForm.name" style="width:400px"/>
        </el-form-item>
        <el-form-item label="备注" label-width="50px" >
          <el-input v-model="editForm.description" style="width:400px"/>
        </el-form-item>
                
      </el-form>
      <template #footer>
          <div class="dialog-footer">
              <el-button  type="primary" @click="editSubmit" >提交</el-button>
              <el-button  type="info" @click="closeEditDialog" >取消</el-button>
          </div>
      </template>
    </el-dialog>
  </div>    
</template>

<style lang="scss">

</style>